<template>
  <div class="approvalMyWorkbench_box">
    <div class="my_content">
      <Row class="my_tab_item">
        <Col class="item_Col item_Col_top" span="18">
        <div class="item_Col_box item_Col_tops">
          <Row class="top_box">
            <Col class="top_item" span="8">
            <div class="top_item_box top_item_box_border">
              <p>{{$t('m.jīnrìwánchéngliàng')}} ({{$t('m.gè')}})</p> <span class="top_span" v-text="baseInfo.todayAudited?baseInfo.todayAudited:0"></span>
            </div>
            </Col>
            <Col class="top_item" span="8">
            <div class="top_item_box top_item_box_border">
              <p>{{$t('m.jīnrìtōngguòlǜ')}}</p>
              <i-circle :size="100" :percent="parseInt(baseInfo.todayPass)" :stroke-width="13" :trail-width="13" stroke-color="#FFF" trail-color="#2D8CF0" style="    margin-top: -20px;">
                <span class="item_Col_box_circle_title">{{baseInfo.todayPass}}%</span>
              </i-circle>
            </div>
            </Col>
            <Col class="top_item" span="8">
            <div class="top_item_box">
              <p>{{$t('m.jīnrìgōngzuòliàngpáimíng')}}</p> <span style="color:#fff;" v-text="baseInfo.todayRank?'No.'+baseInfo.todayRank:'No.'+0"></span>

            </div>
            </Col>
          </Row>
        </div>
        </Col>
        <Col class="item_Col" span="6">
        <div class="item_Col_box top_item_box_one">
          <p>{{$t('m.jīnrìgōngzuòliàngdìyīmíng')}} </p>
          <div class="box_one_left">
            <i>{{baseInfo.todayRankFirstDescription }} </i>
            <em>{{baseInfo.todayRankFirstName}} </em>
          </div>
          <div class="box_one_right">

            <span class="top_span" v-text="baseInfo.todayRankFirstAudited?baseInfo.todayRankFirstAudited:0"></span>

          </div>
        </div>
        </Col>
        <div class="badge_box">
          <div id="flag">No.1</div>
        </div>
      </Row>
      <Row class="my_tab_item">
        <Col class="item_Col" span="6">
        <div class="item_Col_box">
          <p>{{$t('m.chūshěnjīnrìlěijìdàibàndìngdān')}} ({{$t('m.gè')}})</p> <span>{{baseInfo.firstTodayAuditingCount }}</span>
        </div>
        </Col>
        <Col class="item_Col" span="6">
        <div class="item_Col_box">
          <p>{{$t('m.chūshěndàngyuèlěijìyǐbàndìngdān')}} ({{$t('m.gè')}})</p> <span>{{ baseInfo.firstMonthAuditedCount }}</span>
        </div>
        </Col>
        <Col class="item_Col" span="6">
        <div class="item_Col_box">
          <p>{{$t('m.zhōngshěnjīnrìlěijìdàibàndìngdān')}} ({{$t('m.gè')}})</p> <span>{{baseInfo.finalTodayAuditingCount }}</span>
        </div>
        </Col>
        <Col class="item_Col" span="6">
        <div class="item_Col_box">
          <p>{{$t('m.zhōngshěndàngyuèlěijìyǐbàndìngdān')}} ({{$t('m.gè')}})</p> <span>{{baseInfo.finalMonthAuditedCount }}</span>
        </div>
        </Col>
      </Row>

      <div class="items">
        <div class="label">{{$t('m.fēnpèishíjiān')}}</div>
        <DatePicker type="daterange" :value="TimeDefault" format="yyyy-MM-dd" :options="disDate" @on-change="timeChange" v-bind:placeholder="$t('m.fēnpèishíjiān')" class="ivu-input-w200"></DatePicker>
      </div>

      <div class="items">
        <div class="label">{{$t('m.shěnpījiēduàn')}}</div>
        <Select v-model="auditType" class="ivu-input-w200" :placeholder="this.$t('m.loanCount')">
          <Option :value="'first'">{{$t('m.chūshěn')}}</Option>
          <Option :value="'final'">{{$t('m.zhōngshěn')}}</Option>
        </Select>
      </div>
      <br>
      <div style="margin-top:20px;">
        <Button class="parameter_button" style="margin-right:30px;" @click="emptyQueryInfo">{{$t('m.recycle')}}</Button>
        <Button class="parameter_button" type="primary" @click="queryInfo">{{$t('m.cháxún')}}</Button>
      </div>

      <Table border :columns="qualityTable" :data="baseInfoList" class="quality_box"></Table>
    </div>
  </div>
</template>

<script>
import { formatTreeMount } from "@/libs/util";
export default {

  name: 'MyWorkbench',
  data () {
    return {
      baseInfo: {},
      baseInfoList: [],
      assignedDateBegin: "",
      assignedDateEnd: "",
      auditType: "first",
      TimeDefault: [],
      disDate: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now();
        }
      },
      qualityTable: [
        {
          title: this.$t('m.shěnpīrìqí'),
          width: 200,
          align: 'center',
          key: 'assignedDate',
          fixed: 'left',
        },
        {
          title: this.$t('m.yǐshěnpīshù'),
          width: 200,
          align: 'center',
          key: 'auditedCount'
        },
        {
          title: this.$t('m.dàishěnpīshù'),
          width: 200,
          align: 'center',
          key: 'auditingCount',
          render: (h, param) => {
            return h("div", param.row.auditingCount ? param.row.auditingCount : 0);
          }
        },
        {
          title: this.$t('m.fēndānshù'),
          width: 200,
          align: 'center',
          key: 'assignedCount',
        },
        {
          title: this.$t('m.shěnpītōngguòshù'),
          width: 200,
          align: 'center',
          key: 'passCount'
        },
        {
          title: this.$t('m.shěnpījùjuéshù'),
          width: 200,
          align: 'center',
          key: 'rejectCount',
        },
        {
          title: this.$t('m.guàqǐshù'),
          width: 200,
          align: 'center',
          key: 'hangingCount',
        },
        {
          title: this.$t('m.shěnpītōngguòlǜ'),
          width: 200,
          align: 'center',
          key: 'passRate',
          render: (h, param) => {
            return h("div", param.row.passRate ? param.row.passRate : 0 + '%');
          }
        },
        {
          title: this.$t('m.shěnpīfàngkuǎnjīné'),
          width: 200,
          align: 'center',
          key: 'payAmount',
          render: (h, param) => {
            return h("div", formatTreeMount(param.row.payAmount));
          }
        },
        {
          title: 'D0' + this.$t('m.yúqílǜ'),
          width: 200,
          align: 'center',
          key: 'zeroDRate',
          render: (h, param) => {
            return h("div", param.row.zeroDRate ? param.row.zeroDRate : 0 + '%');
          }
        },
        {
          title: 'D7' + this.$t('m.yúqílǜ'),
          width: 200,
          align: 'center',
          key: 'sevenDRate',
          render: (h, param) => {
            return h("div", param.row.sevenDRate ? param.row.sevenDRate : 0 + '%');
          }
        },
        {
          title: 'D7+' + this.$t('m.yúqílǜ'),
          width: 200,
          align: 'center',
          key: 'sevenPlusDRate',
          render: (h, param) => {
            return h("div", param.row.sevenPlusDRate ? param.row.sevenPlusDRate : 0 + '%');
          }
        }
      ],

    }
  },
  components: {
  },
  props: {},
  watch: {},
  methods: {

    queryDateEvent () {
      var d = new Date();
      let y = d.getFullYear(); // 年份
      let m = (d.getMonth() + 1).toString().padStart(2, '0'); // 月份
      let r = d.getDate().toString().padStart(2, '0'); // 日子
      let h = d.getHours().toString().padStart(2, '0'); // 小时 
      let mm = d.getMinutes().toString().padStart(2, '0'); // 分钟
      let ss = d.getSeconds().toString().padStart(2, '0'); // 秒
      this.assignedDateBegin = `${y}-${m}-${r}`; // es6 字符串模板
      this.assignedDateEnd = `${y}-${m}-${r}`;
      this.TimeDefault = [`${y}-${m}-${r}`, `${y}-${m}-${r}`]
    },
    emptyQueryInfo () {
      this.queryDateEvent()
      this.auditType = "first",
        this.queryInfo()
    },
    timeChange (e) {
      if (typeof (e) == "undefined") {
        this.assignedDateBegin = e[0];
      } else if (typeof (e) == "object") {
        this.assignedDateBegin = e[0];
        this.assignedDateEnd = e[1];
      }
    },
    queryInfo () {
      let param = {},
        query = '';
      param.assignedDateBegin = this.assignedDateBegin
      param.assignedDateEnd = this.assignedDateEnd
      param.auditType = this.auditType
      Object.keys(param).forEach((item, index) => {
        if (param[item]) {
          query += `${index === 0 ? '' : '&'}${item}=${param[item]}`;
        }
      });
      let url = `/api/laocai/check/staticAudit/worktable?${query}`
      this.$http.get(url).then((res) => {
        if (res.body.code == 0) {
          this.baseInfo = res.body.result.total
          this.baseInfoList = res.body.result.list
        } else {
          this.baseInfo = {}
          this.baseInfoList = []
        }
        this.$Message.success(this.$t('m.errorCode' + res.body.code));

      });

    },

  },
  filters: {},
  computed: {},
  created () { },
  mounted () {
    this.queryDateEvent()
    this.queryInfo()
  },
  destroyed () { }

}
</script>

<style  lang="scss">
@import "../static/style.css";
@import "../static/common.scss";
.approvalMyWorkbench_box {
  padding: 15px;
  .parameter_box {
    width: 200px;
    margin-right: 50px;
    margin-left: 5px;
  }
  .my_content {
    // background: red;
    margin-top: 30px;
    .my_tab_item {
      margin: 0 -12px;
      // background: red;
      .item_Col {
        // background: #fff;
        text-align: center;
        .item_Col_tops {
          padding: 19px 0px !important;
          background: linear-gradient(
            90deg,
            rgba(45, 140, 240, 1) 0%,
            rgba(18, 91, 212, 1) 100%
          ) !important;
          border-radius: 5px;
        }
        .item_Col_box {
          height: 160px;
          margin: 12px;
          padding: 19px 30px;

          background: #f0f2f5;
          p {
            text-align: left;
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(34, 34, 34, 1);
          }
          span {
            font-size: 45px;
            font-family: PingFang-SC-Heavy, PingFang-SC;
            font-weight: 800;
            color: rgba(34, 34, 34, 1);
          }
          .Amount {
            margin-top: 30px;
            font-size: 30px;
            font-family: PingFang-SC-Heavy, PingFang-SC;
            font-weight: 800;
            color: rgba(34, 34, 34, 1);
          }
          .item_Col_box_color_White {
            color: rgba(255, 255, 255, 1);
          }
          .item_Col_box_circle_title {
            font-size: 18px;
            font-family: PingFang-SC-Heavy, PingFang-SC;
            font-weight: 800;
            color: rgba(255, 255, 255, 1);
          }

          .item_Col_box_circle_title_two {
            font-size: 18px;
            font-family: PingFang-SC-Heavy, PingFang-SC;
            font-weight: 800;
            color: #222222;
          }
          .top_box {
            .top_item {
              padding-left: 36px;
              .top_item_box {
                p {
                  height: 50px;
                  overflow: hidden;
                  text-align: left;
                  font-size: 13px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #ffffff;
                }
                .top_span {
                  font-size: 60px;
                  font-family: PingFang-SC-Heavy, PingFang-SC;
                  font-weight: 800;
                  color: rgba(255, 255, 255, 1);
                  line-height: 84px;
                }
              }
              .top_item_box_border {
                border-right: 2px solid #fff;
                height: 114px;
              }
            }
          }
        }

        .top_item_box_one {
          .box_one_left {
            width: 40%;
            margin-top: 23px;
            float: left;
            i {
              font-size: 22px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
              line-height: 30px;
              display: block;
              margin-bottom: 5px;
            }
            em {
              font-size: 22px;
              font-family: PingFang-SC-Bold, PingFang-SC;
              font-weight: bold;
              color: rgba(34, 34, 34, 1);
              line-height: 30px;
            }
          }
          .box_one_right {
            width: 60%;
            margin-top: 23px;
            float: right;
          }
        }
        .ApprovalBy {
          background: linear-gradient(
            90deg,
            rgba(45, 140, 240, 1) 0%,
            rgba(18, 91, 212, 1) 100%
          );
          border-radius: 5px;
        }
        .ApprovalRefuse {
          background: linear-gradient(
            90deg,
            rgba(225, 112, 112, 1) 0%,
            rgba(197, 73, 73, 1) 100%
          );
          border-radius: 5px;
        }
        .ApprovalPending {
          background: linear-gradient(
            90deg,
            rgba(232, 185, 33, 1) 0%,
            rgba(230, 124, 29, 1) 100%
          );
          border-radius: 5px;
        }
      }
    }
    .badge_box {
      z-index: 11;
      position: absolute;
      right: 25px;
      top: 2px;
      text-align: center;
      #flag {
        letter-spacing: -0.1em;
        width: 42px;
        height: 45px;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        padding-top: 15px;
        position: relative;
        background: -webkit-gradient(
          linear,
          left top,
          left bottom,
          from(#ffbd0c),
          to(#f68e0e)
        );
        background: linear-gradient(180deg, #ffbd0c 0%, #f68e0e 100%);
        color: white;
        font-size: 11px;
        letter-spacing: 0.2em;
        text-align: center;
        text-transform: uppercase;

        font-family: PingFang-SC-Heavy, PingFang-SC;
        font-weight: 800;
        color: rgba(255, 255, 255, 1);
        line-height: 18px;
      }
      #flag:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 0;
        border-bottom: 12px solid #eee;
        border-left: 20px solid transparent;
        border-right: 22px solid transparent;
      }
    }
    .quality_box {
      // margin: 0 12px;
      margin-top: 30px;
    }
    .schedule_box {
      margin: 0 12px;
      margin-top: 30px;
    }
  }
}
.items {
  margin-top: 10px;
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 20px;
  width: 200px;

  .label {
    overflow: hidden;
    white-space: inherit;
    text-align: right;
    color: #222;
    font-size: 14px;
    margin-right: 10px;
  }
}
</style>